
import { t } from '@src/locales'

export default {
  name: 'base-selection-bar',
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    /* 没有数据的时候隐藏 */
    isNoDataHide: {
      type: Boolean,
      default: true,
    },
    isNotShowTooltip: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    show() {
      return this.isNoDataHide && Array.isArray(this.value) && this.value.length > 0;
    }
  },
  methods: {
    openTooltip() {
      
      if (this.timer) return;
      
      this.visible = true;
      const _self = this;
      
      this.timer = setTimeout(() => {
        _self.visible = false;
        
        clearTimeout(this.timer);
        this.timer = null
      }, 2000)
    }
  },
  render() {
    return (
      (
        <div class={["base-selection-bar-container", this.show ? 'block-show' : 'block-hide']}>
          <div class="content">
            <i18n path="component.bizSelectionBar.content">
              <span onClick={() => this.$emit('show-panel')} onMouseover={() => this.visible = true} onMouseleave={() => this.visible = false}>
                {this.value.length}
                {!this.isNotShowTooltip && this.visible && <div class="tooltip">{t('component.bizSelectionBar.tooltip')} <div class="arrow"></div></div>}
              </span> 
            </i18n>
            <span class="clear-btn " onClick={() => this.$emit('toggle-selection')}>{t('common.base.clear')}</span>
          </div>
        </div>
      )
    )
  }
}